/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import yuyuexiangqing from './yuyuexiangqing';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class RemindPage extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            token:this.props.navigation.state.params.token,
            itemList:[{title:'全部',checked:true},{title:'进行中',checked:false},{title:'已完成',checked:false},{title:'已取消',checked:false}],
            dataSource:ds.cloneWithRows([{name:'dca',project:'sdvs',time:'20170413'},{name:'666',project:'777',time:'20170413'}]),
        };
    }
    renderTabItem(){
        var list = this.state.itemList;
        return(
            list.map((item,i)=>{
                return(
                    <View style={{flex:1,height:26}} key={i}>
                        <TouchableOpacity style={item.checked?styles.checkedBg:styles.uncheckedBg} onPress={()=>this.changeTab(i)}>
                                <Text style={item.checked?styles.checked:styles.unchecked}>{item.title}</Text>
                        </TouchableOpacity>
                    </View>
                )
            })
        )
    }

    renderListItem(rowData){
        // alert(JSON.stringify(rowData))
        return(
            <View>
                <RemindItem onPress={()=>this.goYuyuexiangqing()} name={rowData.name} project={rowData.project} time={rowData.time} icon={require('../img/icon/touxiang.png')} imgWidth={60} imgHeight={60}/>
            </View>
        )
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar leftIcon={'left'} titleText={'预约提醒'} leftPress={()=>this.goBack()}/>
                <View style={styles.tabBox}>
                    <View style={styles.tabIcon}>
                        {this.renderTabItem()}
                    </View>
                </View>
                <ListView
                    style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => this.renderListItem(rowData)}/>
            </View>
        )

    }

    changeTab(i){
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var list = this.state.itemList;
        var len = list.length;
        var arr = [];
        for(var j=0;j<len;j++){
            if(i==j){
                list[j].checked = true;
            }else{
                list[j].checked = false;
            }
        }
        for(var j=0;j<i+1;j++){
            arr.push({name:'qqq'+(i+j),project:'sdvs',time:'20170413'})
        }
        this.setState({
            itemList:list,
            dataSource:ds.cloneWithRows(arr),
        })
    }

    goBack(){
        this.props.navigation.goBack();
    }

    goYuyuexiangqing(){
        const {navigate } = this.props.navigation;
        navigate('yuyuexiangqing')
        // const {navigator} = this.props;
        // if(navigator){
        //     navigator.push({
        //         name: '预约详情',
        //         component: yuyuexiangqing,
        //     })
        // }
    }


}

class RemindItem extends Component{
    render(){
        var imgWidth = this.props.imgWidth;
        var imgHeight = this.props.imgHeight;
        return(
            <TouchableOpacity onPress={this.props.onPress}>
                <View style={styles.itemContainer}>
                    <View>
                        <Image style={{width:imgWidth,height:imgHeight}} source={this.props.icon}/>
                    </View>
                    <View style={{marginLeft:10}}>
                        <View style={styles.itemLine}>
                            <Text style={styles.itemTitle}>用户名 : {this.props.name}</Text>
                        </View>
                        <View style={styles.itemLine}>
                            <Text>预约项目 : {this.props.project}</Text>
                        </View>
                        <View style={styles.itemLine}>
                            <Text>预约时间 : {this.props.time}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    tabBox:{
        justifyContent:'center',
        alignItems:'center',
        height:40,
        backgroundColor:'#EFEFF4'
    },
    tabIcon:{
        flexDirection:'row',
        width:7*width/8,
        borderWidth:1,
        borderColor:'#199BEE',
        borderRadius:5
    },
    checked:{
        color:'#fff',
    },
    unchecked:{
        color:'#199BEE'
    },
    checkedBg:{
        backgroundColor:'rgb(79,145,237)',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:5,
        height:26,
    },
    uncheckedBg:{
        backgroundColor:'#EFEFF4',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:5,
        height:25,
    },
    itemContainer:{
        flexDirection:'row',
        alignItems:'center',
        padding:5,
        backgroundColor:'#fff',
        borderTopWidth:1,
        borderTopColor:'#ccc'
    },
    itemLine:{
        flex:1,
        justifyContent:'center'
    },
    itemTitle:{
        fontSize:16,
        fontWeight:'bold',
        color:'#333'
    }
    
    
});